<template>
    <div>
        parent
        <!-- 方式1 传变量 传函数-->
        <!-- <Son1 :money="mny" :changemoney="changeMoneyFn"></Son1> -->
        <hr>
        <!-- 方式2 给子添加一个自定义事件，等一会触发这个自定义事件  发布订阅-->
        <!-- v-on:zdy="changeMoneyFn" => son1.$on('zdy',changeMoneyFn) 触发：son1.$emit('zdy',300) -->
        <Son1 :money="mny" @zdy="changeMoneyFn"></Son1>
        <!-- 如果用@click原生事件 加.native修饰符 就会将整个子级元素绑定上事件了，对应的子级this.$emit里也要改成click -->
        <hr>
        <!-- 方式3 同步数据 -->
        {{mny}}
        <Son1 :value="mny" @input="val=>mny=val"></Son1>
        <!-- 可以更换成 value+input的语法糖v-model，也可以自定义v-model -->
        <Son1 v-model="mny"></Son1> 简写为
        <hr>
        <!-- .sync语法糖 -->
        <!-- <Son1 :money="mny" @update:money="val=>mny=val"></Son1> -->
        <!-- <Son1 :money.sync="mny"></Son1> 简写为-->
        <!-- 如果父子组件想同步数据，可以使用 传递属性+自定义事件的方式（语法糖：v-model/.sync） -->
        <!-- 将父组件的方法直接传递给子组件调用 -->
        <hr>
        <!-- $dispatch 跨级传递-->
        {{mny}}
        <Son2 @zdyeat="eat" @zdyplay="play"></Son2>
    </div>
</template>
<script>
import Son1 from './son1'
import Son2 from './son2'//跨级

export default {
    provide(){ //提供者 上下文
        return {parent:this} //直接将这个组件暴露出去
    },
    name:'parent',
    data(){
        return{
            mny:100
        }
    },
    methods:{
        changeMoneyFn(value){
            //console.log(this)//当前组件parent
            console.log(value)
            this.mny += value
        },
        eat(){
            console.log('eat')
        },
        play(){
            console.log('play2')
        }
    },
    components:{
        Son1,
        Son2
    }
}
//数据传递：1.父子传递  2.子父传递  3.平级传递  4.跨级传递
</script>
